<template>
  <div class="app-container">
    <h1 style="margin-top: 10px">动态分辨率设置</h1>
    <video id="video" autoplay controls ref="myVideo"></video>
    <div class="btn-group">
      <el-button size="small" type="primary" @click="openResolution"
        >开启摄像头</el-button
      >
      <el-button size="small" type="primary" @click="closeResolution"
        >关闭摄像头</el-button
      >
      <el-button size="small" type="primary" @click="qvgaConstraintsChange"
        >低分辨率</el-button
      >
      <el-button size="small" type="primary" @click="vgaConstraintsChange"
        >正常分辨率</el-button
      >
      <el-button size="small" type="primary" @click="hdConstraintsChange">
        高分辨率
      </el-button>
      <el-button size="small" type="primary" @click="fullHdConstraintsChange">
        全高清分辨率
      </el-button>
      <el-button size="small" type="primary" @click="twoKConstraintsChange">
        2K分辨率
      </el-button>
    </div>
  </div>
</template>
<script>
import { defineComponent, reactive, toRefs } from "vue";

export default defineComponent({
  setup() {
    
    const constraints = (window.constraints = {
      audio: false,
      video: true,
    });
    // 低分辨率
    const qvgaConstraints = {
      video: { width: { exact: 320 }, height: { exact: 240 } },
    };
    // 正常分辨率
    const vgaConstraints = {
      video: { width: { exact: 640 }, height: { exact: 480 } },
    };
    // 高清分辨率
    const hdConstraints = {
      video: { width: { exact: 1280 }, height: { exact: 720 } },
    };
    // 全高清分辨率
    const fullHdConstraints = {
      video: { width: { exact: 1920 }, height: { exact: 1080 } },
    };
    // 2k分辨率
    const twoKConstraints = {
      video: { width: { exact: 2560 }, height: { exact: 1440 } },
    };
    // 4k分辨率
    const fourKConstraints = {
      video: { width: { exact: 4096 }, height: { exact: 2160 } },
    };
    // 8k分辨率
    const eightConstraints = {
      video: { width: { exact: 7680 }, height: { exact: 4320 } },
    };
    const state = reactive({
      stream: {},
      videoTracks: null,
    });
    const openResolution = async () => {
      try {
        state.stream = await navigator.mediaDevices.getUserMedia(constraints);
        state.videoTracks = state.stream.getVideoTracks();
        handleSuccess();
      } catch (e) {}
    };
    const closeResolution = () => {
      state.stream = null;
      state.videoTracks[0].stop();
    };
    const handleSuccess = () => {
      let tmpV = document.getElementById("video");
      tmpV.srcObject = state.stream;
    };
    // 切换低分辨率
    const qvgaConstraintsChange=()=>{
      let tmpV = document.getElementById("video");
      closeResolution()
      navigator.mediaDevices.getUserMedia(qvgaConstraints).then(stream=>{
        state.stream=stream
        tmpV.srcObject=stream
      })
    }
    const vgaConstraintsChange=()=>{
      let tmpV = document.getElementById("video");
      closeResolution()
      navigator.mediaDevices.getUserMedia(vgaConstraints).then(stream=>{
        state.stream=stream
        tmpV.srcObject=stream
      })
    }
    const hdConstraintsChange=()=>{
      let tmpV = document.getElementById("video");
      closeResolution()
      navigator.mediaDevices.getUserMedia(hdConstraints).then(stream=>{
        state.stream=stream
        tmpV.srcObject=stream
      })
    }
    const fullHdConstraintsChange=()=>{
      let tmpV = document.getElementById("video");
      closeResolution()
      navigator.mediaDevices.getUserMedia(fullHdConstraints).then(stream=>{
        state.stream=stream
        tmpV.srcObject=stream
      })
    }
    const twoKConstraintsChange=()=>{
      let tmpV = document.getElementById("video");
      closeResolution()
      navigator.mediaDevices.getUserMedia(twoKConstraints).then(stream=>{
        state.stream=stream
        tmpV.srcObject=stream
      })
    }
    return {
      ...toRefs(state),
      openResolution,
      closeResolution,
      vgaConstraintsChange,
      qvgaConstraintsChange,
      hdConstraintsChange,
      fullHdConstraintsChange,
      twoKConstraintsChange
    };
  },
});
</script>

<style scoped>
.app-container {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
#video {
  box-sizing: border-box;
  padding: 0 10px;
  width: 100%;
  height: 500px;
}
.btn-group {
  display: flex;
  flex-direction: row;
  margin-top: 10px;
}
</style>
